<template>
	<view>
		<view class="call_bg">
			<uv-navbar title="点名" @leftClick="leftClick" :placeholder="true" bgColor="rgba(0,0,0,0)"></uv-navbar>
			<view class="course_info">
				<view class="day">
					{{classRecord.date}} 星期二
				</view>
				<view class="time">
					{{classRecord.startTime}} - {{classRecord.endTime}}
				</view>
				<view class="name">
					{{classRecord.classname}}
				</view>
				<view class="info">
					{{classRecord.teacher}}/{{classRecord.classroom}}
				</view>
			</view>
		</view>

		<view class="class_hour">
			本次授课课时<text class="org">2</text>课时
		</view>

		<view class="class_students">
			<view class="title">
				<view class="name">
					学员姓名
				</view>
				<view class="state">
					到课
				</view>
				<view class="state">
					迟到
				</view>
				<view class="state">
					请假
				</view>
				<view class="state">
					未到
				</view>
			</view>
			<view class="search">
				<image class="ico" src="../../static/ico_ss.png" mode="widthFix"></image>
				<input class="input" placeholder-class="placeholder" v-model="keyword" type="text" placeholder="搜索学员" />
			</view>

			<view class="students" v-for="(item,index) in students" :key="index">
				<view class="item">
					<view class="name">
						<text>{{item.name}}</text>
						<uv-icon name="arrow-right" color="#999" size="24rpx"></uv-icon>
					</view>
					<view class="class_time">
						剩余<text class="org">{{item.surplusHour}}</text>课时
					</view>
					<view class="text">
						本次扣2课时
					</view>
				</view>
				<view class="radio_list">
					<view class="radio" v-for="(itema,indexa) in radiolist" :key="indexa"
						@click="clickRadio(index,indexa)">
						<view v-if="item.value == indexa">
							<image class="ico" src="../../static/ico_5a.png" mode="widthFix"></image>
						</view>
						<view v-else>
							<image class="ico" src="../../static/ico_5.png" mode="widthFix"></image>
						</view>
					</view>
				</view>
			</view>

		</view>


		<view class="call_footer">
			<view class="item" v-for="(itema,indexa) in radiolist" :key="indexa">
				{{itema.name}}<text class="org">{{itema.count}}</text>
			</view>
			<view class="btn">
				完成点名
			</view>
		</view>

		<navigator url="/pages/data/data" hover-class="none">
			<image class="ico_data" src="../../static/ico_6.png" mode="widthFix"></image>
		</navigator>
	</view>


</template>

<script>
	import { request } from '@/utils/request';
	
	export default {
		
		onLoad:function(option){
			
			return;
			console.log(option.id)
			
			request({
			    url: 'http://192.168.0.111/xcx/courseDetail', // 替换为你的登录API接口
			    method: 'GET',
				data: {
					classRecordId: option.id,
				}
			}).then(data => {
				
				this.classRecord = {
					id: option.id,
					startTime: data.school_class_schedule_time_start,
					endTime: data.school_class_schedule_time_end,
					teacher: uni.getStorageSync('name'),
					classname: data.school_class_name,
					classroom: data.school_room_name,
					date: data.school_class_record_date,
				}
				
				let students = []
				for (let it of data.students) {
					students.push({
						id: it.user_id,
						name: it.user_name,
						surplusHour: data.user_courses_num, // 剩余课时
						value: 0,
					})
				}
				
				this.students = students;
				this.radiolist[0].count = this.students.length
			    
			}).catch(err => {
			    console.error('数据获取失败:', err);
			    uni.showToast({
					title: '数据获取失败',
					icon: 'none'
			    });
			});
			
		},
		data() {
			return {
				keyword: '',
				radiolist: [{
					name: '到课',
					count: 0,
				}, {
					name: '迟到',
					count: 0,
				}, {
					name: '请假',
					count: 0,
				}, {
					name: '未到',
					count: 0,
				}],
				students: [{
						name: '胡春齐',
						value: 0,
					},
					{
						name: '韩雄霖',
						value: 0,
					}
				],
				classRecord: {
					startTime: '08:00',
					endTime: '09:00',
					teacher: '张三',
					classname: '课堂名称',
					classroom: '上课教室',
					date: '6月1日',
				}
			}
		},
		methods: {
			clickRadio(index, indexa) {
				this.students[index].value = indexa
				for (let i = 0; i < this.radiolist.length; i++) {
					this.radiolist[i].count = this.students.filter(it => it.value == i).length
				}	
			},
			leftClick() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.org {
		color: #FF8535;
	}

	.call_bg {
		background: url() no-repeat center top;
		background-size: 100% auto;
		padding: 80rpx 0 20rpx;
	}

	.ico_data {
		position: fixed;
		right: 40rpx;
		bottom: 180rpx;
		width: 96rpx;
		height: 96rpx;
		border-radius: 50%;
		box-shadow: 0 5rpx 20rpx rgba(61, 61, 61, 0.2);
	}

	.call_footer {
		position: fixed;
		left: 0;
		bottom: 0;
		right: 0;
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #fff;
		padding-left: 40rpx;

		.item {
			font-size: 28rpx;
			font-weight: 500;
			line-height: 38rpx;
			color: #3D3D3D;
		}

		.btn {
			flex-shrink: 0;
			width: 260rpx;
			line-height: 120rpx;
			text-align: center;
			color: #fff;
			background: #FF8535;
			font-size: 30rpx;
			font-weight: 500;
		}
	}

	.students {
		padding: 0 40rpx;
		border-bottom: 1px solid rgba(230, 229, 231, 0.8);
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;

		.radio_list {
			flex-shrink: 0;
			display: flex;
			align-items: center;

			.radio {
				flex-shrink: 0;
				margin-left: 40rpx;
				width: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.ico {
				flex-shrink: 0;
				display: block;
				width: 36rpx;
				height: 36rpx;
				font-size: 0;
			}
		}

		.item {
			padding: 20rpx 0;
			width: 100%;

			.name {
				display: flex;
				align-items: center;
				color: #3D3D3D;

				text {
					flex-shrink: 0;
					margin-right: 10rpx;
					font-size: 30rpx;
					font-weight: 500;
					line-height: 38rpx;
				}
			}

			.class_time {
				font-size: 28rpx;
				font-weight: normal;
				line-height: 38rpx;
				margin-top: 18rpx;
				color: #3D3D3D;

			}

			.text {
				font-size: 28rpx;
				font-weight: normal;
				line-height: 38rpx;
				margin-top: 18rpx;
				color: rgba(61, 61, 61, 0.7);
			}
		}

		.state {
			position: absolute;
			right: 40rpx;
			top: 50%;
			flex-shrink: 0;
			margin-top: -15rpx;
		}
	}

	.class_students {
		background: #fff;
		margin-top: 20rpx;

		.search {
			height: 80rpx;
			background: #F7F7F9;
			display: flex;
			align-items: center;
			border-radius: 16rpx;
			padding: 0 20rpx;
			margin: 20rpx 40rpx;

			.ico {
				flex-shrink: 0;
				width: 40rpx;
				height: 40rpx;
				margin-right: 15rpx;
				opacity: 0.8;
			}

			.input {
				display: block;
				width: 100%;
				background: none;
				border: none;
				font-size: 28rpx;
				color: #333;
				height: 40rpx;
				line-height: 40rpx;
			}

			.placeholder {
				color: #BEBEBE;
			}
		}

		.title {
			padding: 0 40rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: rgba(61, 61, 61, 1);
			height: 80rpx;
			font-size: 30rpx;
			font-weight: 500;
			line-height: 38rpx;

			.name {
				width: 100%;
			}

			.state {
				flex-shrink: 0;
				margin-left: 40rpx;
				width: 60rpx;
			}
		}
	}

	.class_hour {
		height: 110rpx;
		line-height: 110rpx;
		padding: 0 40rpx;
		background: #fff;
		font-size: 30rpx;
		font-weight: 500;
		color: #3D3D3D;

		text {
			padding-left: 15rpx;
			color: rgba(255, 133, 53, 1);
			font-size: 30rpx;
		}
	}

	.course_info {
		margin: 0 40rpx;
		background: #fff;
		border-radius: 16rpx;
		text-align: center;
		padding: 40rpx 40rpx 50rpx;
		color: rgba(61, 61, 61, 1);

		.day {
			font-size: 28rpx;
			font-weight: 500;
			line-height: 38rpx;
			color: rgba(61, 61, 61, 0.5);
		}

		.time {
			font-size: 52rpx;
			font-weight: 500;
			line-height: 52rpx;
			margin-top: 30rpx;
		}

		.name {
			font-size: 28rpx;
			font-weight: 500;
			line-height: 38rpx;
			margin-top: 35rpx;
		}

		.info {
			font-size: 28rpx;
			font-weight: 500;
			line-height: 38rpx;
			margin-top: 10rpx;
		}
	}
</style>